<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    =======
    <div class="home">
      <!-- 头部搜素栏 -->
      <div class="header">
        <div class="header-content">
          <a href="/" class="logo"></a>
          <div class="ipt">
            <el-icon class="searchIcon"><Search /></el-icon>
            <el-input
              class="input"
              placeholder-style="margin-left:100px"
              placeholder="搜索商品,共144659款好物"
            ></el-input>
          </div>
          <button class="header-bt" @click="toLogin">登录</button>
        </div>
      </div>
      <!-- 标题导航栏 -->
      <Tabs>
        <Tab title="推荐">
          <indexSwiper></indexSwiper>
          <!-- 三个口号 -->
          <Row class="slogan">
            <Col class="slogan-item" span="8">
              <img
                src="https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png"
              />
              <span>网易自营品牌</span>
            </Col>
            <Col class="slogan-item" span="8">
              <img
                src="	https://yanxuan.nosdn.127.net/2d0402ffcd52b3ec3b07422681c42a89.png"
              />
              <span>30天无忧退货</span>
            </Col>
            <Col class="slogan-item" span="8">
              <img
                src="	https://yanxuan.nosdn.127.net/eb61ee48e8942dbd1784c9ee75ebe955.png"
              />
              <span>48小时快速退款</span>
            </Col>
          </Row>
          <!-- 内容导航图标 -->
          <Row class="contenNav">
            <Col class="navItem" v-for="nav in navList">
              <img :src="nav.picUrl" />
              <div>{{ nav.text }}</div>
            </Col>
          </Row>
          <!-- 中间动图 -->
          <div class="floor">
            <div class="fCenter">
              <img src="../../../static/images/123.png" />
              <div class="fin">
                <img src="../../../static/images/12333.png" />
              </div>
            </div>
            <Row class="footer">
              <Col class="footerItem" span="8">
                <div class="imgBox">
                  <img class="itemaaa" src="../../../static/images/1.webp" />
                  <img
                    class="item"
                    src="../../../static/images/4db9cee4998ec82a7305f45f41953802.webp"
                  />
                </div>
              </Col>
              <Col class="footerItem" span="8">
                <div class="imgBox">
                  <img class="itemaaa" src="../../../static/images/1.webp" />
                  <img class="item" src="../../../static/images/12333.png" />
                </div>
              </Col>
              <Col class="footerItem" span="8">
                <div class="imgBox">
                  <img class="itemaaa" src="../../../static/images/1.webp" />
                  <img class="item" src="../../../static/images/1511.webp" />
                </div>
              </Col>
            </Row>
          </div>
          <!-- 新人专享 -->
          <div class="newCenter">
            <div class="centerTitle">
              <span class="txt">新人专享礼</span>
            </div>
            <div class="centerConten">
              <div class="cl">
                <div class="clt">新人专享礼包</div>
                <div class="cltb">
                  <img src="../../../static/images/15.png" />
                </div>
              </div>
              <div class="cr">
                <div class="right">
                  <div class="crTop">
                    <div class="crTopBox">
                      <div class="crTitlle">
                        <div class="title">福利社</div>
                        <div class="tag">今日特价</div>
                      </div>
                      <div class="crMoney">
                        <div class="line1">￥15.9</div>
                        <div class="line2">￥19.9</div>
                      </div>
                      <img src="../../../static/images/1511.webp" />
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="crBottom">
                    <div class="crBottomBox">
                      <div class="crBottomTitlle">
                        <div class="title">新人拼团</div>
                        <div class="subTitle">1元起包邮</div>
                      </div>
                      <div class="crMoney">
                        <div class="line1">￥200</div>
                        <div class="line2">￥269</div>
                      </div>
                      <img src="../../../static/images/1522c.webp" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 类目热销榜 -->
          <!-- 热销榜 -->
          <div class="sale">
            <div class="item_t">
              <div class="title">类目热销类</div>
              <div class="big">
                <div class="bigchoose">
                  <div class="left">服饰鞋包类</div>
                  <div class="right">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/4b8ff13ea52bcd7da9bf1bdaee35ee7c.png?quality=75&type=webp&imageView&thumbnail=200x200"
                      alt=""
                    />
                  </div>
                </div>
                <div class="bigchoose">
                  <div class="left">服饰鞋包类</div>
                  <div class="right">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/f1197863500ff75437dfe30c16d9f87f.png?quality=75&type=webp&imageView&thumbnail=200x200"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="list">
              <div class="item" v-for="sale in saleListData">
                <div class="title">{{ sale.categoryName }}</div>
                <img :src="sale.showPicUrl" alt="" />
              </div>
            </div>
          </div>
          <!-- 为你精选 -->
          <myCard></myCard>
        </Tab>
        <!-- 推荐之后的分类 -->
        // eslint-disable-next-line vue/valid-v-for
        <Tab v-for="name in titlle" :title="name">
          <indexSwiper></indexSwiper>
          <myCard></myCard>
        </Tab>
      </Tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import indexSwiper from './components/indexSwiper.vue'
import myCard from './components/myCard.vue'
export default defineComponent({
  name: 'Home',
  // components: { Card }
})
</script>

<script lang="ts" setup>
import { Tab, Tabs, Col, Row, Card } from 'vant'
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useCountStore } from '@/stores/home'
import { useRouter } from 'vue-router'
const router = useRouter()
const countStore = useCountStore()

const { navList, saleListData, titlle } = storeToRefs(countStore)
// console.log('zzz',countStore.navList);
function toLogin() {
  router.push('/')
}
function getHomeList() {
  countStore.getHomeList()
  // console.log(countStore);
}

onMounted(() => {
  getHomeList()
})
</script>

<style scoped lang="scss">
.home {
  height: 100%;
}
.header {
  display: flex;
  padding: 8px 15px;
  height: 44rpx;
  align-items: center;
}
.header-content {
  display: flex;
  /* justify-content: space-between;
   */
  align-items: center;
}
.header .header-content .logo {
  width: 70px;
  height: 20px;
  background-image: url(../../../static/images/Snipaste_2023-04-06_18-22-58.png);
  background-repeat: no-repeat;
  background-size: 188px 188px;
  background-position: -63px -167px;
  margin-top: 6px;
}
.header .header-content .ipt {
  position: relative;
  margin: 0 6px 0 6px;
  display: flex;
  width: 220px;
  height: 28px;
  font-size: 14px;
  background-color: #ededed;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.header .header-content .ipt .input {
  /* margin-left: 10px ; */
  border: none;
  background-color: #ededed;
  box-sizing: border-box;
  font-size: 14px;
}
.header .header-bt {
  border: 1px solid #dd1a21;
  width: auto;
  height: 22px;
  line-height: 20px;
  color: #dd1a21;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;
}
::v-deep .el-input__inner::placeholder {
  color: #666;
  padding-left: 20px;
}

//
.slogan {
  margin: 9px 12px;
}
.slogan .slogan-item {
  display: flex;
  align-items: center;
}

.slogan .slogan-item img {
  width: 16px;
  height: 16px;
}
.slogan .slogan-item span {
  margin-left: 3px;
}

//
.contenNav .navItem img {
  width: 55px;
}
.contenNav .navItem {
  margin: 0 10px;
}

// 中间动图
.floor {
  width: 375px;
}
.floor .fCenter {
  width: 100%;
  position: relative;
}
.floor .fCenter img {
  width: 100%;
  margin-top: 10px;
}
.floor .fCenter .fin img {
  position: absolute;
  width: 84px;
  top: 10px;
  left: 40px;
}
.floor {
  width: 100%;
}
.floor .footer .footerItem .imgBox {
  position: relative;
  margin: 10px;
}
.floor .footer .footerItem .imgBox .itemaaa {
  width: 115px;
}
.floor .footer .footerItem .item {
  width: 70px;
  position: absolute;
  right: 30px;
  bottom: 5px;
}
// 新人专享
.centerTitle {
  width: 375px;
  height: 45px;
  padding: 0 15px;
  margin-top: 20px;
}
.centerTitle .txt {
  position: relative;
  width: 100%;
  color: #333;
  font-size: 16px;
  text-align: center;
  display: inline-block;
}
.centerTitle .txt::after {
  content: '';
  background: #333;
  width: 12px;
  height: 1.5px;
  position: absolute;
  top: 7px;
  left: 233px;
}
.centerTitle .txt::before {
  content: '';
  background: #333;
  width: 12px;
  height: 1.5px;
  position: absolute;
  top: 7px;
  left: 130px;
}
// 新人专享内容
.centerConten {
  display: flex;
  width: 100%;
  height: 217px;
  margin: 0 10px;
  // padding-top: px;
}
.centerConten .cl {
  width: 50%;
  background: #f9e9cf;
  border-radius: 4px;
  margin-right: 2px;
  position: relative;
}
.centerConten .cl .clt {
  padding: 15px 0 0 15px;
  font-size: 16px;
  font-family: PingFangSC-Medium;
}
.centerConten .cl .cltb img {
  width: 129px;
  position: absolute;
  left: 30px;
  top: 50px;
}
.centerConten .cr {
  width: 50%;
}
.centerConten .cr .right {
  display: flex;
  height: 107px;
  // border:1px solid #333;
}
.centerConten .cr .right .crTop {
  width: 100%;
  background: #fbe2d3;
  border-radius: 4px;
  margin-bottom: 2px;
}
.centerConten .cr .right .crTop .crTopBox {
  position: relative;
}

.centerConten .cr .right .crTop .crTopBox .crTitlle {
  position: absolute;
  top: 14px;
  left: 14px;
}
.centerConten .cr .right .crTop .crTopBox .crTitlle .title {
  color: #333;
  font-size: 17px;
}

.centerConten .cr .right .crTop .crTopBox .crTitlle .tag {
  color: #7f7f7f;
  font-size: 12px;
  margin-top: 4px;
}
.centerConten .cr .right .crTop .crTopBox .crMoney {
  position: absolute;
  top: 8px;
  right: 25px;
  width: 40px;
  height: 40px;
  opacity: 0.8;
  background: #f59524;
  border-radius: 50%;
  // padding-top: 10px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  z-index: 3;
}
.centerConten .cr .right .crTop img {
  width: 100px;
  position: absolute;
  left: 78px;
  top: 8px;
}
.centerConten .cr .right .crBottom {
  width: 100%;
  background: #ffecc2;
  border-radius: 4px;
}

.centerConten .cr .right .crBottom .crBottomBox {
  position: relative;
}
.centerConten .cr .right .crBottom .crBottomBox .crBottomTitlle {
  position: absolute;
  top: 14px;
  left: 14px;
}
.centerConten .cr .right .crBottom .crBottomBox .crBottomTitlle .title {
  color: #333;
  font-size: 17px;
}
.centerConten .cr .right .crBottom .crBottomBox .crBottomTitlle .subTitle {
  background: #cbb693;
  width: 64px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  margin-top: 4px;

  // box-sizing: border-box;
  // display: inline-block;
}
.centerConten .cr .right .crBottom .crBottomBox .crMoney {
  position: absolute;

  top: 8px;
  right: 25px;
  width: 40px;
  height: 40px;
  opacity: 0.8;
  background: #f59524;
  border-radius: 50%;
  padding-top: 5px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  z-index: 3;
}
.centerConten .cr .right .crBottom img {
  width: 100px;
  position: absolute;
  left: 78px;
  top: 8px;
}

// 类目热销
.sale {
  margin-top: 20px;
  padding: 0 10px 0 15px;
  margin-bottom: 10px;
}
.sale .item_t {
  font-size: 14px;
}
.sale .item_t .title {
  font-size: 16px;
}
.sale .item_t .big {
  display: flex;
}
.sale .item_t .big .bigchoose {
  margin: 20px 0;
  width: 170px;
  height: 100px;
  background-color: #f9f3e4;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  align-items: center;
}
.sale .item_t .big .bigchoose .left {
  position: relative;
  padding-left: 12px;
  width: 70px;
  height: 21px;
  z-index: 1;
  flex-shrink: 0;
}
.sale .item_t .big .bigchoose .left::before {
  position: absolute;
  top: 26px;
  content: '';
  left: 12px;
  width: 24px;
  height: 2px;
  display: block;
  background-color: #333;
}
.sale .item_t .big .bigchoose .right {
  position: relative;
}
.sale .item_t .big .bigchoose .right img {
  width: 100px;
  height: 100px;
}
.sale .list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 15px;
}
.sale .list .item {
  width: 82.5px;
  height: 90px;
  margin: 0 5px 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
}
.sale .list .item .title {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
  text-align: center;
  font-family: PingFangSC-Medium;
}
.sale .list .item img {
  width: 60px;
  height: 60px;
}
// 为你推荐
</style>
